// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0px;
    }
  }
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  //position: relative;

  // 现代化美化样式
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // 头部美化
  .el-dialog__header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #f0f0f0;
    padding: 20px 24px 16px;
    border-radius: 12px 12px 0 0;

    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      line-height: 1.4;
    }

    .el-dialog__headerbtn {
      top: 20px;
      right: 20px;

      .el-dialog__close {
        font-size: 18px;
        color: #909399;
        transition: all 0.2s ease;

        &:hover {
          color: #f56c6c;
          transform: scale(1.1);
        }
      }
    }
  }

  // 内容区域美化
  .el-dialog__body {
    padding: 24px;
    background: #ffffff;
    color: #606266;
    line-height: 1.6;

    // 表单样式优化
    .el-form {
      .el-form-item {
        margin-bottom: 20px;

        .el-form-item__label {
          font-weight: 500;
          color: #606266;
        }

        .el-input__inner,
        .el-textarea__inner {
          border-radius: 6px;
          border: 1px solid #dcdfe6;
          transition: all 0.2s ease;

          &:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
          }
        }
      }
    }
  }

  // 底部美化
  .el-dialog__footer {
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    padding: 16px 24px 20px;
    border-radius: 0 0 12px 12px;
    text-align: right;
  }

  // 全屏模式特殊处理
  &.is-fullscreen {
    border-radius: 0 !important;

    .el-dialog__header,
    .el-dialog__footer {
      border-radius: 0;
    }
  }

  // 悬停效果
  &:hover {
    box-shadow:
      0 25px 50px -12px rgba(0, 0, 0, 0.15),
      0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  }
}

// Dialog遮罩层美化
.el-dialog__wrapper {
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  // 遮罩层动画
  &.dialog-fade-enter-active,
  &.dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &.dialog-fade-enter,
  &.dialog-fade-leave-to {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
}

// Dialog内容动画

// 拖拽相关样式增强
.el-dialog {
  // 拖拽时的视觉反馈
  &.dragging {
    transition: none !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
  }

  // 拖拽手柄样式
  .dialog-resize-handle {
    &:hover {
      background: rgba(24, 144, 255, 0.1) !important;
    }

    &.dialog-resize-width {
      &:hover::after {
        content: '';
        position: absolute;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 20px;
        background: #1890ff;
        border-radius: 1px;
      }
    }

    &.dialog-resize-height {
      &:hover::after {
        content: '';
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 8px;
        height: 8px;
        border-right: 2px solid #1890ff;
        border-bottom: 2px solid #1890ff;
        border-radius: 0 0 2px 0;
      }
    }
  }

  // 拖拽头部样式增强
  .el-dialog__header {
    &:hover {
      background: linear-gradient(135deg, #f0f2f5 0%, #ffffff 100%);
    }

    // 拖拽提示图标
    &::before {
      content: '⋮⋮';
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #c0c4cc;
      font-size: 12px;
      opacity: 0;
      transition: opacity 0.2s ease;
    }

    &:hover::before {
      opacity: 1;
    }
  }
}
.el-dialog {
  &.dialog-fade-enter-active,
  &.dialog-fade-leave-active {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  &.dialog-fade-enter,
  &.dialog-fade-leave-to {
    transform: scale(0.9) translateY(-20px);
    opacity: 0;
  }

  &.dialog-fade-enter-to,
  &.dialog-fade-leave {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

.el-menu--collapse
  > div
  > .el-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none;
}

// 表格美化
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid #f0f0f0;

  th {
    background-color: #f8f9fa !important;
    font-weight: 600;
    color: #606266;
    transition: background-color 0.3s;
    padding: 12px 0;

    &.is-leaf {
      border-bottom: 1px solid #ebeef5;
    }
  }

  td {
    padding: 12px 0;
    transition: background-color 0.3s;
  }

  .el-table__row {
    transition: all 0.3s;

    &:hover td {
      background-color: #f5f7fa !important;
    }
  }

  .el-button + .el-button {
    margin-left: 8px;
  }
}
